<template>
  <van-nav-bar style="color: #fff;" title="订单列表" fixed />
  <div style="height: 45px;"></div>
  <van-tabs v-model:active="active" animated @change="onChange">
    <van-tab title="全部订单"></van-tab>
    <van-tab title="待付款"></van-tab>
    <van-tab title="待发货"></van-tab>
    <van-tab title="待收货"></van-tab>
    <van-tab title="分批发货"></van-tab>
  </van-tabs>
  <van-empty v-if="fetch.length === 0" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
    image-size="80" description="您没有相关订单" />
  <div v-else>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-for="item in fetch">
          <router-link :to="`/detail/${item.goods_id}`">
            <p>订单编号{{ item.goods_id }}</p>
            <h4>{{ item.status === 1 ? `29:${time}关闭订单` : " " }}</h4>
            <van-card :price="item.goods_price" :title="item.goods_name">
              <template #thumb>
                <img :src="item.goods_small_logo" alt="" style="width: 70px; height: 70px;">
              </template>
              <template #footer>
                <span>{{ item.status === 1 ? '待付款' : '待发货' }}</span>
              </template>
            </van-card>
          </router-link>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>


</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';
const route = useRoute()
let fetch = ref([])
let orderData = ref([])
axios.get('http://localhost:5050/goods', route.params.index).then(res => {
  console.log('订单列表', res)
  orderData.value = res.data
  fetch.value = orderData.value
})
const onChange = (index) => {
  if (index == 1) {
    fetch.value = orderData.value.filter(item => item.status === 1)
  }
  if (index == 2) {
    fetch.value = orderData.value.filter(item => item.status === 2)
  }
  if (index == 0) {
    fetch.value = orderData.value
  }
  if (index == 3) {
    fetch.value = []
  }
  if (index == 4) {
    fetch.value = []
  }
}
let time = ref(59)
let timer = setInterval(() => {
  time.value--
  if (time.value == 0) {
    clearInterval(timer)
  }
}, 1000)
</script>

<style lang="scss" scoped></style>